// 线性雾和指数雾 - gltf加载器
import { useEffect } from 'react'
import * as THREE from 'three'
import './App.css'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入GLTF加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// 导入draco解析器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

function App() {

    useEffect(() => {
        // 场景
        const scene = new THREE.Scene()
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            45,//相机的角度
            window.innerWidth / window.innerHeight,//相机的宽高比
            0.1,//相机的近截面
            1000//相机的远截面
        )

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)//设置渲染尺寸
        document.body.appendChild(renderer.domElement)//将渲染器添加到文档中
        const gui = new GUI()
// --------------------------------main--------------------------------------------
        // 实例化加载器
        const loader = new GLTFLoader()
        // 实例化draco解析器
        const dracoLoader = new DRACOLoader()
        // 设置draco解析器的路径
        dracoLoader.setDecoderPath('./draco/')
        // 配置GLTF加载器使用draco解析器
        loader.setDRACOLoader(dracoLoader)

        // 加载模型
        loader.load(
            './gltfExample/airplane.gltf',
            (gltf) => {
                gltf.scene.position.set(0, 0, 0);
                // 缩放模型大小
                gltf.scene.scale.set(0.009, 0.009, 0.009);
                scene.add(gltf.scene);
            }
        )
        // 添加环境光
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        // 添加方向光
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 5, 5);
        scene.add(directionalLight);

        // 创建线性雾
        // scene.fog = new THREE.Fog(0x999999, 0.1, 50)

        // 创建指数雾
        scene.fog = new THREE.FogExp2(0x999999, 0.2)
        // 设置背景
        scene.background = new THREE.Color(0x999999)


        // --------------------------------main--------------------------------------------

        // 设置相机位置
        camera.position.z = 5
        camera.position.y = 2
        camera.position.x = 2
        camera.lookAt(0, 0, 0)

        // 添加世界坐标辅助器
        const axesHelper = new THREE.AxesHelper(5)
        scene.add(axesHelper)


        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement)
        // 阻尼
        controls.enableDamping = true
        // 旋转
        controls.enableRotate = true
        // 缩放
        controls.enableZoom = true
        // 设置阻尼系数
        controls.dampingFactor = 0.05
        // 渲染
        renderer.render(scene, camera)

        // 渲染函数
        function animate() {
            requestAnimationFrame(animate)
            // 更新轨道控制器
            controls.update()
            renderer.render(scene, camera)
        }
        // 调用渲染函数
        animate()

        // 监听窗口变化
        window.addEventListener('resize', () => {
            // 更新相机
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            // 更新渲染器
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.setPixelRatio(window.devicePixelRatio)
        })


    }, [])
    return (
        <>

        </>
    )
}

export default App
